<template>
  <!-- 未加工 -->
  <div class="unprocessed">
    <div class="title">共200条记录，共计100吨</div>

    <el-table v-loading="loading" ref="multipleTable" :data="tableData" tooltip-effect="dark">
      <el-table-column label="序号" width="55" align="center">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column prop="name" label="加工单编号" align="center"></el-table-column>
      <el-table-column prop="name" label="加工设备" align="center"></el-table-column>
      <el-table-column prop="name" label="料单名称" align="center"></el-table-column>
      <el-table-column prop="name" label="构件数量" align="center"></el-table-column>
      <el-table-column prop="name" label="总重量(t)" align="center"></el-table-column>
      <el-table-column prop="name" label="原材需用量(t)" align="center"></el-table-column>
      <el-table-column prop="name" label="出材率" align="center"></el-table-column>
      <el-table-column prop="date" label="加工单生成时间" align="center"></el-table-column>
      <el-table-column prop="date" label="计划到场时间" align="center"></el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template v-slot="scope">
          <el-button size="mini" type="text" @click="makeUp(scope.row)">补打</el-button>
          <el-button size="mini" type="text" @click="complete(scope.row)">加工完成</el-button>
          <el-button size="mini" type="text" @click="cancel(scope.row)">取消</el-button>
        </template>
      </el-table-column>
    </el-table>

    <processing-completed ref="processingCompleted" />
  </div>
</template>

<script>
import processingCompleted from '../dialog/processing-completed.vue'

export default {
  name: 'Unprocessed',
  components: { processingCompleted },
  props: {},
  data() {
    return {
      loading: false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          value: '0'
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          value: '1'
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          value: '1'
        },
      ],
    }
  },
  filters: {},
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    makeUp(row) {
      console.log(row, '补打')
    },
    complete(row) {
      console.log(row, '加工完成')
      this.$refs.processingCompleted.add()
    },
    cancel(row) {
      const h = this.$createElement
      this.$confirm('', {
        title: '取消',
        message: h('div',{ class: 'confirm' }, [
          h('p','您确定要取消该方案吗?'), h('p', '如果方案已经打印料牌，取消后料牌将失效。')
        ]),
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async () => {
        console.log(row)
      }).catch(() => {
        console.log('取消')
      });
    },
  }
}
</script>

<style scoped lang="scss">
.confirm {
  text-align: center;
}
</style>
